<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('同步H5平台账号')" />
	<style type="text/css">
	.layui-col-md4 {width: 29%;min-width: 200px !important;}
	.layui-elem-quote{padding:0 15px}
	.layui-elem-quote::before{display: none}
	.layui-table-tool{display: flex;width:95%}
	</style>
</head>
<body>
<div style="padding: 0 5px;">
	<div class="layui-inline layui-col-md5">
		<div class="layui-inline layui-col-md12">
			<blockquote class="layui-elem-quote" style="padding-top: 10px;"><div style="float:left;margin: 0px 10px 0px -10px;"><br/><br/><br/><br/>系<br/>统<br/>用<br/>户<br/></div>
				<table class="layui-inline layui-hide" id="dhtable2" lay-filter="ftable2"></table>
			</blockquote>
		</div>
<!-- 		<div class="layui-inline layui-col-md1"> -->
<!-- 			<div class="layui-btn movebtn layui-btn-disabled" style="margin-top: 255px;padding:0 10px"> -->
<!-- 	            <p class="dhicon dh-angle-double-right" style="font-size:14px;margin:0;color:#C9C9C9"></p> -->
<!-- 	        </div> -->
<!-- 		</div> -->
		<div class="layui-inline layui-col-md12">
			<blockquote class="layui-elem-quote" style="padding-top: 10px;">
				<div style="float:left;margin: 0px 10px 0px -10px;"
					th:utext="'<br /><br /><br />' + (${session.h5DeployType eq 'wechat' ? '企<br />业<br />微<br />信' : '<br /><br /><br />钉<br />钉'}) + '<br />用<br />户<br />'">
				</div>
				<table class="layui-hide" id="dhtable3" lay-filter="ftable3"></table>
			</blockquote>
		</div>
	</div>
	<div class="layui-inline layui-col-md7">
		<table class="layui-hide" id="dhtable" lay-filter="ftable"></table>
	</div>
</div>
<script type="text/html" id="move">	
	<a class="layui-btn layui-btn-xs dhicon dh-angle-up" style="padding: 0 3px;" lay-event="up"></a>
	<a class="layui-btn layui-btn-xs dhicon dh-angle-down" style="padding: 0 3px;margin-left:0px;" lay-event="down"></a>   
</script>
<script type="text/html" id="barDh">
    <a class="layui-btn layui-btn-danger layui-btn-xs dhicon dh-remove" lay-event="del">&nbsp;删除</a>	
</script>
<th:block th:include="include :: footer" />
<script type="text/javascript">
var $,layer,form,table,
	listData=[],listData2=[],listData3=[];
	oldData=[];
layui.use(['table','form','layer','jquery'], function () {
     $ = layui.$,layer = layui.layer,form = layui.form,table = layui.table;
     $.ajax({
  		url: '/system/user/list',
        type: "get",
        dataType: "json",
		beforeSend: function(){
		    showloadings(true);
		},
        success: function(result) {
          	$.each(result.data,function(i,v){
          		if(v.enWeChatId)listData.push(v);
          	})
          	oldData = listData;//记录原始数据
          	$.tablelist.init({
          		elem: '#dhtable'
				,data:listData
				,limit:1000
				,page:false
  		 		,cols: [[
	  	    		{type:'numbers', fixed: 'left'}
	  	    		,{field:'userId', title: '系统用户编号',align: 'center'}
	  	    		,{field:'userName', title: '系统用户名称',align: 'center'}
	  	    		,{field:'enWeChatId', title: top.session.h5DeployType == 'wechat' ? '企业微信账号' : '钉钉账号',align: 'center'}
	  	    		,{field:'enWeChatName', title: top.session.h5DeployType == 'wechat' ? '企业微信名称' : '钉钉名称',align: 'center'}
// 	  	    		,{title: '移动',align: 'center', toolbar: '#move',width:70}
	  	    		,{fixed: 'right', title: '操作',align: 'center', toolbar: '#barDh'}
				]
				]
               ,height:'full-0'
            });
			showloadings(false);
    	 	$.ajax({
    	 		url: top.session.h5DeployType == 'wechat' ? '/system/wechat/userlist' : '/system/dingtalk/userlist',
    	 		type: "get",
    	 		dataType: "json",
				beforeSend: function(){
					showloadings(true);
				},
    	 		success: function(result2) {
    	 			for(i=result2.data.length-1;i>=0;i--){
    	 				listData3.push(result2.data[i]);
    	 				$.each(listData,function(ii,vv){
    	 					if(result2.data[i] && result2.data[i].userid == vv.enWeChatId){
    	 						vv.enWeChatName = result2.data[i].name;//关联名称
    	 						result2.data.splice(i, 1);
    	 					}
    	 				})
    	 			}
    	 			table.reload('dhtable',{data : listData});//重载显示名称
    	 			$.tablelist.init({
    	 				elem: '#dhtable3'
    	 				,data: result2.data
    	 				,limit:1000
    	 				,page:false
    	 				,toolbar:true
    	 				,defaultToolbar: [{title:'关联',layEvent: 'move',icon: 'layui-icon-next'}]
    	 				,cols: [[
    	 				 	{type:'numbers', fixed: 'left'}
    	 		    		,{type:'checkbox'}
    	 		    		,{field:'userid', title: top.session.h5DeployType == 'wechat' ? '企业微信账号' : '钉钉账号',align: 'center'}
    	 		    		,{field:'name', title: top.session.h5DeployType == 'wechat' ? '企业微信名称' : '钉钉名称',align: 'center'}
    	 					]
    	 				]
    	 				,height:'330'
    	 			});
					showloadings(false);
    	 		}
    	 	});
        }
   	});
	$.ajax({
		url: '/system/user/list?disabled=0',
		type: "get",
		dataType: "json",
		beforeSend: function(){
			showloadings(true);
		},
		success: function(result) {
			listData2 = result.data;
			var tb=[];
			$.each(result.data,function(i,v){
				if(!v.enWeChatId)tb.push(v);
			})
			$.tablelist.init({
				elem: '#dhtable2'
				,data: tb
				,limit:1000
				,page:false
				,cols: [[
	 				{type:'numbers', fixed: 'left'}
	    			,{type:'checkbox'}
		    		,{field:'userId', title: '系统用户编号',align: 'center'}
		    		,{field:'userName', title: '系统用户名称',align: 'center'}
					]
				]
				,height:'full-330'
			});
			showloadings(false);
		}
	});
   	//监听开关动作
	form.on('switch(bFieldKeys)', function(obj){
		table.cache.dhtable[obj.value].bFieldKeys=obj.elem.checked;
    });
   	//监听行事件
 	table.on('tool(ftable)', function (obj) {
 		var data = obj.data, 
 			event = obj.event,
 			trIndex=parseInt(obj.tr[0].dataset.index);//当前行下标
 		switch(event){
 			case "del":
 				obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
 				for(var i=0; i < table.cache.dhtable.length; i++){
 					if(!table.cache.dhtable[i] || table.cache.dhtable[i].length==0){//不存在和array[0]
 						table.cache.dhtable.splice(i, 1);    //删除一项
 					}
 					continue;
 				}
 				var ld2 = [],ld3 = [];
 				$.each(listData2,function(i,v){ld2.push(v)});
 				$.each(listData3,function(i,v){ld3.push(v)});
				for(var i= ld2.length-1; i >= 0 ; i--){
					$.each(table.cache.dhtable,function(j,v){
						if(ld2[i] && ld2[i].userId == v.userId)ld2.splice(i, 1);
					})
				}
				for(var i= ld3.length-1; i >= 0 ; i--){
					$.each(table.cache.dhtable,function(j,v){
						if(ld3[i] && ld3[i].userid == v.enWeChatId)ld3.splice(i, 1);
					})
				}
				table.reload('dhtable',{data : table.cache.dhtable});
				table.reload('dhtable2',{data : ld2});
				table.reload('dhtable3',{data : ld3});
 				break;
 			case "up":
 				if(0==trIndex){
 					layer.msg("已经到顶啦！");
 				}else{
 					enWeChatId=table.cache.dhtable[trIndex-1].enWeChatId;
 					table.cache.dhtable[trIndex-1].enWeChatId=table.cache.dhtable[trIndex].enWeChatId;
 					table.cache.dhtable[trIndex].enWeChatId=enWeChatId;
 					table.reload('dhtable',{data : table.cache.dhtable});
 				}
 				break;
 			case "down":
 				if(table.cache.dhtable.length-1==trIndex){
 					layer.msg("已经到底啦！");
 				}else{
 					enWeChatId=table.cache.dhtable[trIndex+1].enWeChatId;
 					table.cache.dhtable[trIndex+1].enWeChatId=table.cache.dhtable[trIndex].enWeChatId;
 					table.cache.dhtable[trIndex].enWeChatId=enWeChatId;
 					table.reload('dhtable',{data : table.cache.dhtable});
 				}
 				break;
 		}
 	});
 	table.on('toolbar(ftable3)', function(obj){
 		var checkStatus = table.checkStatus('dhtable2');
 		var checkStatus2 = table.checkStatus('dhtable3');
	    switch(obj.event){
	    	case 'move'://关联账号
	    		if(checkStatus.data.length == checkStatus2.data.length){
		    		$.each(checkStatus.data,function(i,v){
	    				v.enWeChatId=checkStatus2.data[i].userid;
	    				v.enWeChatName=checkStatus2.data[i].name;
		    		})
		    		for(var i=table.cache.dhtable2.length-1; i>=0; i--){
						if(table.cache.dhtable2[i]["LAY_CHECKED"]){
							table.cache.dhtable2.splice(i, 1);    //删除一项
						}
					}
		    		for(var i=table.cache.dhtable3.length-1; i>=0; i--){
						if(table.cache.dhtable3[i]["LAY_CHECKED"]){
							table.cache.dhtable3.splice(i, 1);    //删除一项
						}
					}
		    		table.cache.dhtable=table.cache.dhtable.concat(checkStatus.data);
		    		table.reload('dhtable',{data: table.cache.dhtable});
		    		table.reload('dhtable2',{data: table.cache.dhtable2});
		    		table.reload('dhtable3',{data: table.cache.dhtable3});
	    		}else layer.msg("请确保勾选数量相等！",{icon:7});
	    	break;
	    }
 	});
});
function callbackdata(){
	var rd={};
	rd.oldData = oldData;
	rd.newData = table.cache.dhtable;
	return rd;
}
</script>
</body>
</html>